<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="/WEB-INF/layouts/standard.xhtml">
        <ui:define name="content">
           <h:form prependId="false">
              <div class="fleft padding3">
            
                 <p:dataTable var="usr" value="#{tableBean.listUsers}" paginator="true" rows="4"  
                  selection="#{tableBean.selectedUsers}">  
		   
		         <f:facet name="header">  
		             Checkbox Based Selection  
		         </f:facet>  
		   
		          <p:column selectionMode="multiple" />  
		   
		         <p:column headerText="User name">  
		             <h:outputText value="#{usr.username}" />  
		         </p:column>  
		   
		         <p:column headerText="Last name">  
		             <h:outputText value="#{usr.lastname}" />  
		         </p:column>  
		   
		         <p:column headerText="First name">  
		             <h:outputText value="#{usr.firstname}" />  
		         </p:column>	          
		   
		          <f:facet name="footer">  
             <p:commandButton value="View" image="ui-icon ui-icon-search" 
                              update="displayMulti" oncomplete="singleUserDialog.show()"/>  
         </f:facet>  
		     </p:dataTable> 
		      <p:dialog header="User Detail" widgetVar="singleUserDialog"  
		               width="250" height="300" showEffect="explode" hideEffect="explode">		          
		         <p:dataList id="displayMulti"  
                 value="#{tableBean.selectedUsers}" var="u">  
            Username: #{u.username}, Age: #{u.age}  
         </p:dataList>
		   
		     </p:dialog> 
            </div>
            <div class="clear"></div>
             <div class="ptop">
                <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
                <h:commandLink value="DataTable 2" action="datatable2"/>
                <h:outputText value=" -   List of Users - In-Cell Editing " />
             </div>                      
           </h:form>        
        </ui:define>
    </ui:composition>
</html>